{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
     <link rel="stylesheet" href="{% static 'css/register.css' %}">

    <title>Registration Page</title>

</head>
<body>
<div class="box">
 <div class="left">
        <h2>欢迎来到 JOBFLOW AI！</h2>
        <img class="huojian" src="{% static 'image/huojian.png' %}">
        <img class="u32" src="{% static 'image/u32.png' %}">
    </div>

   <div class="right">
        <h4>用户注册</h4>
        <h5>USER REGISTRATION</h5>
    <div class="login-buttons">
            <div class="login-button">
                   <img src="{% static '/image/phone-icon.png' %}" alt="手机图标">
                <span>手机注册</span>
            </div>
            <div class="login-button">
                <img src="{% static '/image/wechat-icon.png' %}" alt="微信图标">
                <span>微信注册</span>
            </div>
        </div>

    <form method="post">
        {% csrf_token %}
        <div id="huo" class="huo">
            <p>
                <span>————————或者使用电子邮箱注册————————</span>
            </p>
        </div>

        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" required>
        <span class="error-text" style="color: red;height: 15px"></span>
        <small style="color: #666; display: block; margin-bottom: 10px;">用户名长度需大于5个字符，建议使用邮箱作为用户名</small>
        
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" required>
        <span class="error-text" style="color: red;height: 15px;width:auto;margin:0 auto;display:inline-block;" id="error_password"></span>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" required>
        <span class="error-text" style="color: red;height: 15px;width:auto;margin:0 auto;display:inline-block;" id="error_email"></span>

        <label for="email_code">邮箱验证码:</label>
        <div class="verification-code-input">
            <input type="text" name="email_code" id="email_code" required>
            <button id="get_email_code" type="button">获取验证码</button>
        </div>
        <button type="submit" >注册</button>

        <span class="error_tip" style="color: red; display: block; margin-top: 10px;">{{ register_errmsg }}</span>

    </form>


</div>
<script src="{% static 'js/axios-0.18.0.min.js' %}"></script>
<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'js/register.js' %}"></script>

</body>
</html>
